﻿{extend name="layout/base" /}

{block name="meta"}
{__block__}
<link href="__ADDON__/__STYLE__/css/cart.css" rel="stylesheet">
<link href="__CDN__/assets/libs/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet">
<link href="__ADDON__/__STYLE__/js/bt-ext/bt-group-by.css" rel="stylesheet">
{/block}


{block name="body"}
<body class="shopping_cart_page">
{/block}

{block name="main"}

  <!-- Main Container -->
    <div class="container">
      <div id="stepflex" class="stepflex">
        <dl class="first doing">
          <dt class="s-num">1</dt>
          <dd class="s-text">我的购物车</dd>
          <dd></dd>
        </dl>
        <dl class="normal">
          <dt class="s-num1">2</dt>
          <dd class="s-text1">填写核对订单信息</dd>
        </dl>
        <dl class="last">
          <dt class="s-num1">3</dt>
          <dd class="s-text1">成功提交订单</dd>
        </dl>
      </div>
      <div class='mall-clear'></div>
      <div class='main-head'>我的购物车</div>
      <table id="table"
             data-select-item-name="id"
             data-group-by="true"
             data-group-by-field="name"
             data-group-by-sum-field="shoptotal"
             data-group-by-total-field="carttotal">
        <thead>
        <tr>
          <th data-field="checkis" data-align="center" data-valign="middle" data-checkbox='true'>全选</th>
          <th data-field="goodsimg" data-formatter="imageFormatter" >图片</th>
          <th data-field="goodsname" data-formatter="goodsnameFormatter">名称与规格</th>
          <th data-field="shopprice" data-align="right" data-valign="middle">价格</th>
          <th data-field="num" data-formatter="numFormatter" data-width="100px" data-align="center" data-valign="middle">数量</th>
          <th data-field="total" data-align="right" data-valign="middle" >小计</th>
          <th data-field="operate" data-events="window.operateEvents" data-formatter="operateFormatter" data-align="center" data-valign="middle">操作</th>
        </tr>
        </thead>
      </table>

      <div class='cart-btn'>
        <a href='{:addon_url("mall/index/index")}' class='mall-contnue mall-cart-asha'>继续购物</a>
        <a href='#none' onclick='addOrder()' class='mall-next mall-cart-reda'>结算</a>
        <div class='mall-clear'></div>
      </div>
    </div>
   <!-- Footer -->

{/block}

{block name="js"}
{__block__}
<script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
<script src="__CDN__/assets/libs/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="__CDN__/assets/libs/bootstrap-table/dist/bootstrap-table-locale-all.min.js"></script>
<script src="__ADDON__/__STYLE__/js/bt-ext/bt-group-by.js" ></script>
<script>
    var $table = $('#table');
    var selections = [];

    /*function getIdSelections() {
        return $.map($table.bootstrapTable('getSelections'), function (row) {
            return row.id;
        })
    }*/

    function getIdSelectionsByCheckis() {
        return $.map($table.bootstrapTable('getData'), function (row) {
            if(row.checkis!=0){
                return row.id;
            }
        })
    }

    // 根据主键UniqueId获取行索引
    /*function getIndexByUniqueId(table, id) {
        var row = table.bootstrapTable("getRowByUniqueId",id);
        var tableData = table.bootstrapTable('getData');
        return tableData.indexOf(row);
    }*/

    // 根据主键ID获取行数据
    /*function getRowById (table, id) {
        var row = {};
        var options = table.bootstrapTable("getOptions");
        $.each(table.bootstrapTable('getData'), function (i, j) {
            if (j[options.pk] == id) {
                row = j;
                return false;
            }
        });
        return row;
    }*/

    function initTable() {
        $table.bootstrapTable({
            url: "/addons/mall/cart/index",
            locale: require.config.language,
            uniqueId: "id",
            "groupByFormatter": function (value, row, index) {
                var html = [];
                html.push(value);
                if (row['shopQQ'] != '') {
                    html.push('<a href="tencent://message/?uin=' + row['shopQQ'] + '&Site=QQ交谈&Menu=yes">\n' +
                        '<img border="0" src="https://wpa.qq.com/pa?p=1:' + row['shopQQ'] + ':7" alt="QQ交谈" width="71" height="24" />\n' +
                        '</a>\n');
                }
                if (row['shopWangWang'] != '') {
                    html.push('<a target="_blank" href="https://www.taobao.com/webww/ww.php?ver=3&touid=' + row['shopWangWang'] + '&siteid=cntaobao&status=1&charset=utf-8">\n' +
                        '<img border="0" src="https://amos.alicdn.com/realonline.aw?v=2&uid=' + row['shopWangWang'] + '&site=cntaobao&s=1&charset=utf-8" alt="和我联系" />\n' +
                        '</a>\n');
                }
                return html.join('');
            },
        });

        $table.on('check.bs.table uncheck.bs.table ' +
            'check-all.bs.table uncheck-all.bs.table',
            function () {
                selections = getIdSelectionsByCheckis();
            })
    }

    $(function() {
        initTable()

        $('#locale').change(initTable)

        $table.on('check.bs.table', function (e, row) {
                var url = "/addons/mall/cart/multi";
                $.get(url,{'ids': row.id, "checkis":1}, function(ret){
                    if(ret.code){
                        $table.bootstrapTable('refresh',{silent: true});
                    }else{
                        layer.msg(ret.msg);
                    }
                }, 'json');
            });
        $table.on('uncheck.bs.table ', function (e, row) {
            var url = "/addons/mall/cart/multi";
            $.get(url,{'ids': row.id, "checkis":0}, function(ret){
                if(ret.code){
                    $table.bootstrapTable('refresh',{silent: true});
                }else{
                    layer.msg(ret.msg);
                }
            }, 'json');
        });
        $table.on('check-all.bs.table', function (e, rows) {
            var url = "/addons/mall/cart/multi";
            $.get(
                url,
                {
                    'ids': $.map(rows, function (row) {
                        return row.id;
                    }).join(","),
                    "checkis":1
                },
                function(ret) {
                    if (ret.code){
                        $table.bootstrapTable('refresh', {silent: true});
                    } else {
                        layer.msg(ret.msg);
                    }
                },
                'json'
            );
        });

        //在表格内容渲染后根据checkis列值设置选中ids
        $table.on('post-body.bs.table',function () {
            selections = getIdSelectionsByCheckis();
        });

    })

    /**
     * 新建实物订单
     */
    function addOrder(){
        if(selections.length>0){
            location.href = '/addons/mall/order/add?ids=' + selections.join(",");
            return false;
        }else{
            layer.msg('请选择要结算的商品!',{icon:2});
            return false;
        }
    }

    /**
     * 更改购物车数量
     * @param cart_id
     * @param input
     */
    function change_num(cart_id, input){
        var _value = input.value;
        var url = '/addons/mall/Cart/update';
        $.get(url,{'ids': cart_id,'num': _value}, function(ret){
            if(ret.code){
                $(input).attr('changed', _value);
                $table.bootstrapTable('refresh',{silent: true});
            }else{
                layer.msg(ret.msg);
                $(input).val($(input).attr('changed'));
            }
        }, 'json');
    }

    function operateFormatter(value, row, index) {
        return [
            '<a class="btn btn-xs btn-danger btn-delone" href="javascript:void(0)" title="{:__(\'Del\')}" data-toggle="tooltip">',
            '<i class="fa fa-trash"></i>',
            '</a>'
        ].join('')
    }

    window.operateEvents = {
        'click .btn-delone': function (e, value, row, index) {
            var url = '/addons/mall/Cart/del';
            $.get(url,{'ids': row.id}, function(ret){
                if(ret.code){
                    $table.bootstrapTable('refresh',{silent: true});
                }else{
                    layer.msg(result.msg);
                }
            }, 'json');
        }
    }

</script>
{/block}

